<template>
  <div class="wrapper">
    <el-pagination
        @size-change="tapPageSize"
        @current-change="tapPage"
        :current-page="currentPage"
        :page-sizes="pageSizeOption"
        :page-size="currentPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  </div>
</template>
<style scoped>
.wrapper{display: flex;justify-content: flex-end;align-items: center;padding:10px;}
</style>
<script>
export default {
  created(){

  },
  props:{
    pageSizeOption:{
      type:Array,
      default:function(){
        return  [20, 40, 60, 100,500,1000]
      }
    },
    currentPageSize:{
      type:Number,
      default(){
        return 20
      }
    },
    currentPage:{
      type:Number,
      default(){
        return 1
      }
    },
    total:{
      type:Number,
      default(){
        return 0
      }
    }
  },
  data(){
    return {
      
    }
  },
  methods:{
    tapPageSize(pageSize){
      this.$emit('tapPageSize',pageSize);
    },
    tapPage(page){
      this.$emit('tapPage',page);
    },
  },
  components:{

  }
}


</script>